<template>
  <div>
    <el-row>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="活动名称">
          <el-input v-model="queryForm.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getListActivity(queryForm)">查询</el-button>
          <el-button @click="resetActivityQuery">重置</el-button>
          <el-button type="primary" plain @click="openAddDialog">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="category" label="类别"/>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0">已创建</el-tag>
            <el-tag type="success" v-else-if="scope.row.status == 1">已发布</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="创建时间">
          <template slot-scope="scope">{{ switchToDate(scope.row.startTime) || '-' }}</template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
          <template slot-scope="scope">{{ switchToDate(scope.row.endTime) || '-' }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
            <el-button @click="handleDetail(scope.row)" type="text">详情</el-button>
            <el-button @click="handlePub(scope.row)" v-if="scope.row.status == 0" type="text">发布</el-button>
            <el-button @click="handleClose(scope.row)" v-if="scope.row.status == 1" type="text">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background    
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        style="margin-top: 30px;"/>
    </el-row>

    <!-- 活动操作弹窗 -->
    <el-dialog :visible.sync="activityDialogVisible" width="400px" :title="mode=='edit'?'编辑活动':'添加活动'" @closed="cancelDialog">
      <el-form :model="activityForm" label-position="left" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="activityForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动全称" prop="title" v-if="mode == 'add'">
            <el-input v-model="activityForm.title"></el-input>
          </el-form-item>
          <el-form-item label="详情描述" prop="detailedDesc" v-if="mode == 'add'">
            <el-input v-model="activityForm.detailedDesc"></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-select v-model="activityForm.category" placeholder="请选择">
              <el-option
                  v-for="item in cateOptions"
                  :key="item.activityCategoryId"
                  :label="item.activityCategoryName"
                  :value="item.activityCategoryName">
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item>
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" @click="confirmSubmitActivity(activityForm)">确定</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 活动详情弹窗 -->
    <el-dialog :visible.sync="detailDialogVisible" width="600px" title="活动详情">
      <el-descriptions border>
        <el-descriptions-item label="名称">{{detailForm.name || '-'}}</el-descriptions-item>
        <el-descriptions-item label="活动全称">{{detailForm.title || '-'}}</el-descriptions-item>
        <el-descriptions-item label="类型">{{detailForm.category || '-'}}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small" v-if="detailForm.status == 0">已创建</el-tag>
          <el-tag size="small" type="success" v-else-if="detailForm.status == 1">已发布</el-tag>
          <el-tag size="small" type="warning" v-else-if="detailForm.status == 2">已结束</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建者">{{detailForm.creator || '-'}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{detailForm.createdTime || '-'}}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{detailForm.startTime || '-'}}</el-descriptions-item>
        <el-descriptions-item label="详细描述">{{detailForm.detailedDesc || '-'}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { optionCate } from '@/api/root';
import { listActivity , addActivity , editActivity , removeActivity , pubActivity , closeActivity ,detailActivity} from '@/api/activity';
import { toDate } from '@/util/date';
import { Message, MessageBox } from 'element-ui';
export default {
  data(){
    return{
      mode:'add',
      activityDialogVisible: false,
      detailDialogVisible: false,
      cateOptions:[],
      currentPage:undefined,
      total:undefined,
      queryForm:{
        name:'',
        pageNum:1,
        pageSize:5
      },
      activityForm:{
        category:''
      },
      detailForm:{},
      tableData:[{
        name:'活动1',
        title:'',
        abstractInfo:'',
        detailedDesc:'',
        category:'',
        endTime:'',
        picUrls:'',
        startTime:'2017-01-05',
      }]
    }
  },
  methods:{
    getListActivity(){
      listActivity(this.queryForm).then(res=>{
        this.tableData = res.row
      }).catch(()=>{})
    },
    getCateOption(){
      optionCate().then(res=>{
        this.cateOptions = res.data
      })
    },
    resetActivityQuery(){
      this.queryForm = {
        name:'',
        pageNum:1,
        pageSize:5
      }
      this.getListActivity(this.queryForm)
    },
    openAddDialog(){
      this.mode = 'add'
      this.activityDialogVisible = true
    },
    // 删除类型
    handleDel(data){
      MessageBox.alert(`确定要删除活动<${data.name}>吗?`).then(()=>{
        removeActivity(data.id).then(res=>{
          Message.success(res.msg)
          this.getListActivity()
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handleEdit(data){
      this.mode = 'edit'
      this.activityDialogVisible = true
      this.activityForm = JSON.parse(JSON.stringify(data))
    },
    cancelDialog(){
      this.activityDialogVisible = false
      this.activityForm = {category:''}
    },
    handlePub(data){
      MessageBox.alert(`确定要发布活动<${data.name}>吗?`).then(()=>{
        pubActivity(data.id).then(res=>{
          Message.success(res.msg)
          this.getListActivity()
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handleClose(data){
      MessageBox.alert(`确定要关闭活动<${data.name}>吗?`).then(()=>{
        closeActivity(data.id).then(res=>{
          Message.success(res.msg)
          this.getListActivity()
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handleDetail(data){
      this.detailDialogVisible = true
      detailActivity(data.id).then(res=>{
        this.detailForm = res.data
      }).catch(()=>{})
    },
    confirmSubmitActivity(data){
      if(this.mode == 'add'){
        addActivity(data).then(res=>{
          Message.success(res.msg)
          this.activityDialogVisible = false
          this.activityForm = {category:''}
          this.getListActivity()
        }).catch(()=>{})
      }else if(this.mode == 'edit'){
        editActivity(data).then(res=>{
          Message.success(res.msg)
          this.activityDialogVisible = false
          this.activityForm = {category:''}
          this.getListActivity()
        }).catch(()=>{})
      }
    },
    switchToDate(str){
      return toDate(str)
    },
    handleSizeChange(size){
      this.queryForm.pageSize=size
      this.getListActivity(this.queryForm)
    },
    handleCurrentChange(page){
      this.queryForm.pageNum=page
      this.getListActivity(this.queryForm)
    },
  },
  created(){
    this.getListActivity()
    this.getCateOption()
  }
}
</script>

<style>

</style>